<div id="preferences-devices" class="preferences-page preferences-devices" data-bind="with: $root.preferencesDevices">
  <div class="preferences-titlebar" data-bind="l10n_text: z.string.preferencesDevices"></div>
  <div class="preferences-content-wrapper">
    <div class="preferences-content" data-bind="antiscroll: shouldUpdateScrollbar">
      <section class="preferences-section" data-uie-name="preferences-device-current">
        <header class="preferences-header" data-bind="l10n_text: z.string.preferencesDevicesCurrent"></header>
        <div class="preferences-devices-model" data-bind="text: currentClient().model"></div>
        <div class="preferences-devices-id"><span data-bind="l10n_text: z.string.preferencesDevicesId"></span>
          <span data-bind="foreach: displayClientId()" data-uie-name="preferences-device-current-id"><span class="device-id-part" data-bind="text: $data"></span></span>
        </div>
        <div class="preferences-devices-activated">
          <div data-bind="foreach: activationDate"><span data-bind="css: {'preferences-devices-activated-bold': $data.isStyled}, text: $data.text">?</span></div>
          <div data-bind="foreach: activationLocation"><span data-bind="css: {'preferences-devices-activated-bold': $data.isStyled}, text: $data.text">?</span></div>
        </div>
        <div class="preferences-devices-fingerprint-label" data-bind="l10n_text: z.string.preferencesDevicesFingerprint"></div>
        <div class="preferences-devices-fingerprint" data-bind="foreach: localFingerprint()"><span class="device-id-part" data-bind="text: $data"></span></div>
      </section>

      <hr class="preferences-devices-separator preferences-separator">

      <!-- ko if: devices().length > 0 -->
        <section class="preferences-section">
          <header class="preferences-header" data-bind="l10n_text: z.string.preferencesDevicesActive"></header>
          <!-- ko foreach: devices -->
            <div class="preferences-devices-card" data-bind="click: $parent.clickOnShowDevice">
              <div class="preferences-devices-card-data">
                <svg class="preferences-devices-card-icon" data-bind="attr: {'data-uie-value': id}" data-uie-name="device-id">
                  <!-- ko if: meta.isVerified()-->
                    <use xlink:href="#icon-verified" data-uie-name="user-device-verified"></use>
                  <!-- /ko -->
                  <!-- ko ifnot: meta.isVerified()-->
                    <use xlink:href="#icon-not-verified" data-uie-name="user-device-not-verified"></use>
                  <!-- /ko -->
                </svg>
                <div class="preferences-devices-card-info">
                  <div class="preferences-devices-model" data-bind="text: model" data-uie-name="preferences-device-active-model"></div>
                  <div class="preferences-devices-id">
                    <span data-bind="l10n_text: z.string.preferencesDevicesId"></span>
                    <span data-bind="foreach: formatId()" data-uie-name="preferences-device-active-id"><span class="device-id-part" data-bind="text: $data"></span></span>
                  </div>
                </div>
              </div>
              <div class="preferences-devices-card-action">
                <div class="icon-trash" data-bind="click: $parent.clickOnRemoveDevice" data-uie-name="do-device-remove"></div>
                <div class="icon-forward" data-uie-name="go-device-details"></div>
              </div>
            </div>
          <!-- /ko -->
          <div class="preferences-detail" data-bind="l10n_text: z.string.preferencesDevicesActiveDetail"></div>
        </section>
      <!-- /ko -->
    </div>
  </div>
</div>
